<template>
    <MyHome></MyHome>
    <div v-if="channel.adminLogin === true">
        <!-- 车次管理 -->
        <el-table :data="tableData1" style="width: 100%">
    <el-table-column prop="seatID" label="列车编号" width="180" />
    <el-table-column prop="starting" label="起点站" width="180" />
    <el-table-column prop="terminal" label="终点站" width="180" />
    <el-table-column prop="arrival" label="起始时间" />
    <el-table-column prop="departure" label="到达时间" />
    <el-table-column prop="price" label="最低票价" />
    <el-table-column prop="seatType" label="列车类型" />

    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="handleEditadminTrips(scope.$index, scope.row)">
          管理
        </el-button>
        <el-button type="danger" @click="handleEditTrips(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>

  </el-table>
    </div>
   
    <div v-if="channel.adminLogin === false" class="user">
        <img src="../../assets/管理员.png" alt="cw">
        <div class="wz1">
            您好，您的权限没有权限访问！
        </div>
    </div>



    <!-- 点击管理弹出的提示框的代码 -->
    <el-dialog v-model="centerDialogVisible" title="车次管理操作页面" width="400" center>
    <span>
    <!-- 输入框 -->
     
      <div>
        <div class="wz2">车次编号:</div>
        <el-input v-model="updatetrainid" disabled placeholder="请输入要修改的车次编号" />
      </div>


      <div>
        <div class="wz2">起点站:</div>
        <el-input v-model="updatetrainstarting"  placeholder="请输入要修改的起点站" />
      </div>

      <div>
        <div class="wz2">终点站:</div>
        <el-input v-model="updatetrainterminal" placeholder="请输入要修改的终点站" />
      </div>

      <div>
        <div class="wz2">起始时间:</div>
        <el-input v-model="updatetrainarrival" placeholder="请输入要修改的起始时间" />
      </div>

      <div>
        <div class="wz2">到达时间:</div>
        <el-input v-model="updatetraindeparture" placeholder="请输入要修改的到达时间" />
      </div>

      <div>
        <div class="wz2">最低票价:</div>
        <el-input v-model="updatetrainprice" placeholder="请输入要修改的最低票价" />
      </div>

      <div>
        <div class="wz2">座位类型:</div>
        <el-input v-model="updatetrainseatType" placeholder="请输入要修改的座位类型" />
      </div>

    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消操作</el-button>
        <el-button type="primary" @click="updatetrain">
          确认修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import MyHome from '../top/MyHome.vue';
import { ElNotification } from 'element-plus'
import { useCounterStore } from '../../stores/counter'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/axios/request';
import { useRouter } from 'vue-router';
const router = useRouter();


const channel = useCounterStore()
//车次的表格
const tableData1 = ref();
tableData1.value = channel.channelList;
//handleEdit
const handleEditTrips = (index, row) => {
    console.log(row.seatID)
    channel.deletetrainid = row.seatID
    //调用
    channel.deletetraincaozhuo();
    //删除这个编号的数
    tableData1.value.splice(index, 1);
    ElNotification({
    title: '删除通知',
    message: '车次已经删除成功！',
    duration: 0,
  })
  };
//控制提示框的按钮
const centerDialogVisible = ref(false)
//放列车的编号的变量
const updatetrainid = ref('')
//放列车的起点站的变量
const updatetrainstarting = ref('')
//放列车的终点站的变量
const updatetrainterminal = ref('')
//放列车的起始时间的变量
const updatetrainarrival = ref('')
//放列车的到达时间的变量
const updatetraindeparture = ref('')
//放列车的最低票价的变量
const updatetrainprice = ref('')
//放列车的座位类型的变量
const updatetrainseatType = ref('')

//修改列车信息的ajax请求
const lieche = function () {
  request({
    url: '/updatetrain',
    method: 'post',
    data: {
      seatID: updatetrainid.value,
      starting: updatetrainstarting.value,
      terminal: updatetrainterminal.value,
      arrival: updatetrainarrival.value,
      departure: updatetraindeparture.value,
      price: updatetrainprice.value,
      seatType: updatetrainseatType.value,
    }
  }).then(res => {
    console.log(res)
    if (res.data.code === 200) {
    ElMessage({
    message: '修改通知',
    type: '车次信息已经修改成功！',
  })
    }
  })
}
//updatetrain的函数
const updatetrain = () => {
    //调用
    lieche();
    //1s后获取数据
    setTimeout(() => {
      channel.getList();
    }, 300)
    tableData1.value = channel.channelList;
    //关闭提示框
    centerDialogVisible.value = false

    // 跳转到指定路径
    router.push('/ticket');

    //提示改签成功
    ElMessage({
    message: '车次信息已经修改成功！',
    type: 'success',
  })
 
}

//handleEditadminTrips的函数
const handleEditadminTrips = (index, row) => {
    console.log(row.seatID)
    centerDialogVisible.value = true
    updatetrainid.value = row.seatID
    updatetrainstarting.value = row.starting
    updatetrainterminal.value = row.terminal
    updatetrainarrival.value = row.arrival
    updatetraindeparture.value = row.departure
    updatetrainprice.value = row.price
    updatetrainseatType.value = row.seatType
  
}
</script>

<style scoped>
    .wz2{
        font-size: 20px;
        font-weight: 600;
    }
    .user{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 100px;
    }
    img{
        width: 100px;
        height: 100px;
    }
    .wz1{
        margin-left: 20px;
        font-size: 20px;
        font-weight: 600;
    }
</style>